<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.orderNo" clearable class="filter-item" style="width:200px;" placeholder="输入订单编号" />
      <el-input v-model="listQuery.phone" clearable class="filter-item" style="width:150px;" placeholder="输入手机号" />
      <el-select
        v-model="listQuery.status"
        style="width: 200px"
        class="filter-item"
        placeholder="请选择支付状态"
      >
        <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.id"/>
      </el-select>
      <el-button
        v-permission="['operation:landorder:list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" label="订单编号" prop="orderNo" />
      <el-table-column align="center" label="手机号" prop="phone" />
      <el-table-column align="center" label="支付状态" prop="statusText" />
      <el-table-column align="center" label="支付金额" prop="actualPrice" />
      <el-table-column align="center" label="订单时间" prop="gmtCreate" />
      <el-table-column label="操作" width="250" class-name="small-padding fixed-width" prop="detail">
        <template slot-scope="scope">
          <el-button type="primary" @click="showDetail(scope.row)">查看详情</el-button>
          <el-button v-if="scope.row.cancel == 1" type="danger" @click="cancelOrder(scope.row.orderNo)">解除订单</el-button>
          <el-button v-if="scope.row.status == 50" type="danger" @click="customRefund(scope.row)">我要退款</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog :visible.sync="detailDialogVisible" title="土地订单详情">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>土地信息</span>
        </div>
        <el-card v-for="item in goodsDetail.detail" :key="item.id" class="land-body" >
          <div class="land-box">
            <img :src="item.imageUrl" class="land-img">
            <div class="land-info">
              <div class="text-item">
                土地编号：<span v-text="item.landNo" />
              </div>
              <div class="text-item">
                土地面积：<span v-text="item.area + 'm²'" />
              </div>
            </div>
          </div>
          <!-- <div class="text-item">
            配送周期：<span v-text="goodsDetail.detail.num + '次'" />
          </div> -->
        </el-card>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <div class="text-item">
          订单编号：<span v-text="goodsDetail.orderNo" />
        </div>
        <div class="text-item">
          下单时间：<span v-text="format(goodsDetail.gmtCreate)" />
        </div>
        <div class="text-item">
          订单总价：&yen;<span v-text="goodsDetail.actualPrice / 100.0" />
        </div>
        <div v-if="goodsDetail.refundPrice > 0" class="text-item">
          已退金额：&yen;<span v-text="goodsDetail.refundPrice / 100.0" />
        </div>
        <div class="text-item">
          支付方式：<span v-text="goodsDetail.payChannel" />
        </div>
        <div class="text-item">
          支付时间：<span v-text="format(goodsDetail.gmtPay)" />
        </div>
        <div class="text-item">
          收货人：<span v-text="goodsDetail.consignee" />
        </div>
        <div class="text-item">
          收货手机号：<span v-text="goodsDetail.phone" />
        </div>
        <div class="text-item">
          收货地址：<span v-text="goodsDetail.province + goodsDetail.city + goodsDetail.county + goodsDetail.address" />
        </div>
      </el-card>
    </el-dialog>
    <el-dialog :visible.sync="refundVisiable" title="我要退款">
      <el-form
        ref="refundForm"
        :model="refundForm"
        :rules="refundRules"
        :data = "refundlist"
        status-icon
        label-position="left"
        label-width="150px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="退款金额(元)" prop="sum">
          <el-input v-model="refundForm.sum" type="number" @keyup.native="proving($event)" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="refundVisiable = false">取消</el-button>
        <el-button type="primary" @click="handleRefundAdd">确定</el-button>
      </div>
    </el-dialog>
    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<script>
import { landorderList, detailLandorder, cancelLandorder, refundLandorder } from '@/api/landorder'
import BackToTop from '@/components/BackToTop'
import { MessageBox } from 'element-ui'
import Pagination from '@/components/Pagination'
export default {
  name: 'ImgList',
  components: { BackToTop, Pagination },
  data() {
    const validateAcquaintance = (rule, value, callback) => {
      // 输入 8--，value 为 8
      // 估计这里内部使用了 parseInt() / parseFloat()
      const newvalue = value.toString()
      if (newvalue > this.currPrice) {
        callback(new Error('退款金额最大为' + this.currPrice))
      } else if (newvalue.indexOf('.') > -1 && newvalue.split('.')[1].length > 2) {
        callback(new Error('金额最多两位小数'))
      } else {
        callback()
      }
    }
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20,
        orderNo: undefined,
        landNo: undefined,
        phone: undefined,
        status: undefined
      },
      goodsDetail: {
        detail: {}
      },
      detailDialogVisible: false,
      statusList: [{ name: '未支付', id: 10 }, { name: '已完成', id: 50 }, { name: '已取消', id: 90 }, { name: '已退款', id: 70 }],
      statusMap: {
        10: '未支付',
        50: '已完成',
        90: '已取消',
        70: '已退款'
      },
      refundForm: { sum: '' },
      refundRules: {
        sum: [
          { required: true, message: '退款金额不能为空', trigger: 'blur' },
          { validator: validateAcquaintance, trigger: 'blur' }
        ]
      },
      refundlist: [],
      refundVisiable: false,
      currOrderNo: {},
      currPrice: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      landorderList(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.list.forEach(item => {
            item.actualPrice = item.actualPrice / 100.0
            item.refundPrice = item.refundPrice / 100.0
            item.statusText = this.statusMap[item.status]
            item.gmtCreate = this.format(item.gmtCreate)
          })
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    showDetail(row) {
      if (!this.detailDialogVisible) {
        detailLandorder(row.id)
          .then(response => {
            this.goodsDetail = response.data.data
            this.detailDialogVisible = true
          })
      }
    },
    cancelOrder(order) {
      cancelLandorder(order)
        .then(response => {
          this.getList()
        })
    },
    customRefund(order) {
      this.refundVisiable = true
      this.currOrderNo = order.orderNo
      this.refundForm.sum = order.actualPrice
      this.currPrice = order.actualPrice
      this.$nextTick(() => {
        this.$refs.refundForm.clearValidate()
      })
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    format(shijianchuo) {
      if (shijianchuo) {
        var time = new Date(shijianchuo)
        var y = time.getFullYear()
        var m = time.getMonth() + 1
        var d = time.getDate()
        var h = time.getHours()
        var mm = time.getMinutes()
        var s = time.getSeconds()
        return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
      } else {
        return ''
      }
    },
    handleRefundAdd(m) {
      this.$refs['refundForm'].validate(valid => {
        if (valid) {
          refundLandorder(this.currOrderNo, this.refundForm.sum * 100)
            .then(response => {
              this.$notify.success({
                title: '成功',
                message: '退款成功'
              })
              this.refundVisiable = false
              this.getList()
            })
            .catch(response => {
              MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
                confirmButtonText: '确定',
                type: 'error'
              })
              this.refundVisiable = false
            })
        }
      })
    },
    proving(e) {
      const keynum = window.event ? e.keyCode : e.which
      if (keynum === 109 || keynum === 189) {
        this.refundForm.sum = this.currPrice
        this.$notify.error({
          title: '',
          message: '退款金额最小值为0'
        })
      }
    }
  }
}
</script>
<style type="text/less" scoped="">
  .box-card{
    margin-bottom: 20px;
  }
  .text-item{
    margin-bottom: 15px;
  }
  .land-box{
    display: flex;
    align-items: center;
  }
  .land-body:not(:last-child){
    margin-bottom: 15px;
  }
  .land-img{
    width:40px;
    height:auto;
    margin-right:20px;
  }
  .land-info .text-item:not(:last-child){
    margin-bottom: 5px;
  }
</style>
